<template>
  <div class="address-box">
    <nav-bar class="nav-bar">
      <template v-slot:default>地址管理</template>
    </nav-bar>

      <div v-if="list.length == 0" style="margin-top: 200px; text-align: center">
      还没有地址信息，去添加吧！
      <div><van-button round block color="#42b983" @click="$router.push({path:'/addressedit',query:{type:'add',addressId:item.id}})">前往地址编辑</van-button></div>
    </div>
    
    
    <div class="address-item" v-else>
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
  </div>
</template>
<script>
import navBar from "components/common/navbar/NavBar";
import {reactive,toRefs,onMounted} from 'vue'
import {getAddressList} from 'network/address.js'
import {useRouter,useRoute} from 'vue-router'

export default {
  components: {
    navBar,
  },
  setup() {
      const router=useRouter()
      const route=useRoute()
      const state=reactive({
          chosenAddressId:1,
          list:[]
      })
      onMounted(()=>{
          getAddressList().then(res=>{
              if(res.data.length==0){
                  state.lsit=[]
                  return
              }
              state.list=res.data.map(item=>{
                  return{
                      id:item.id,
                      name:item.name,
                      tel:item.phone,
                      address:`${item.province}${item.city}${item.county}${item.address}`,
                      isDefault:!!item.is_default
                  }
              })
          })
      })
      const onAdd=()=>{
          router.push({path:'/addressedit',query:{type:'add'}})
      }
      const onEdit=(item)=>{
          router.push({path:'/addressedit',query:{type:'edit',addressId:item.id}})
      }
      return{
          ...toRefs(state),
          onAdd,
          onEdit,
      }
  },
};
</script>
<style lang="less" scoped>
.address-box{
    margin-top: 50px;
    .address-item{
        /deep/.van-address-list__bottom{
            bottom: 83px;
        }
    }
}
</style>